<template>
  <div>
    <img v-if="!isBox" :style="getStyle()" :src="parseSrc()" @error="imgError"/>
    <div v-else class="box">
      <img :src="parseSrc()" @error="imgError"/>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isHead: {
      type: Boolean,
      default: false
    },
    isBox: {
      type: Boolean,
      default: false
    },
    isBack: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    src: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    }
  },
  methods: {
    getDefaultSrc () {
      return process.env.VUE_APP_BASE + (this.isHead ? 'head.png' : 'none.png')
    },
    imgError (e) {
      const img = e.srcElement
      img.onerror = null // 防止闪图
      img.src = this.getDefaultSrc()
    },
    parseSrc () {
      if (this.src === null || this.src === '') {
        return this.getDefaultSrc()
      }
      if (this.src.startsWith('http://') || this.src.startsWith('https://')) {
        return this.src
      }
      return (this.isBack ? this.MINIO_URL : '') + this.src
    },
    getStyle () {
      const style = {
        width: this.width === 0 ? '100%' : this.width + 'px',
        height: this.height === 0 ? 'auto' : this.height + 'px'
      }
      if (this.isHead) {
        style.width = (this.width === 0 ? '32' : this.width) + 'px'
        style.height = (this.height === 0 ? '32' : this.height) + 'px'
        style.borderRadius = '50%'
      }
      return style
    }
  }
}
</script>
<style lang="less" scoped>
img{
  width:100%;
  height:auto;
}
.box{
  border:solid 1px #e2e2e2;
  width:120px;
  height:120px;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover{
    border:solid 1px #88c6f8;
  }
  img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
  }
}
</style>
